<!-- 
  @name: 添加充值/免单客户 or 编辑客户类型
  @date: 2020.3.19
 -->
<template>
	<view class="content">
		<!-- 用户信息-添加时显示 -->
		<view class="infoview" v-if="add">
			<view class="line">
				<image class="img" :src="info.userPhoto"></image>
				<view class="text">{{info.userName}}</view>
			</view>
			<view class="line t1">
				<view>手机号码</view>
				<view class="text">{{info.userPhone}}</view>
			</view>
		</view>
		
		<!-- 类型选择 -->
		<view class="typeview" :class="add ? '' : 'bl'">
			<view class="tip">客户类型</view>
			<view class="type">
				<view class="btn" :class="userType === 1 ? 'sl' : ''" @tap="userType = 1">充值客户</view>
				<view class="btn" :class="userType === 2 ? 'sl' : ''" @tap="userType = 2">免单客户</view>
			</view>
			<view class="input" v-if="add && userType === 1">
				<view class="cont">
					<text class="icon">￥</text>
					<input type="digit" class="int" placeholder="输入首次充值金额" 
						placeholder-class="phcolor" v-model.trim="rechargeMoney" />
				</view>
				<view class="dw">元</view>
			</view>
		</view>
		
		<!-- 可用加注站 -->
		<view>
			<view class="tblank"></view>
			<view class="select-item" style="font-size: 34rpx;">选择可用加注站</view>
			<view class="select-item" :class="{'active':isSelectAll}" @tap="selectAll">
				全部加注站
				<view class="check_box">
					<view :class="isSelectAll ? '_ck1' : '_ck2'" ></view>
				</view>
			</view>
			<view class="title" @tap="$navigateTo('/pages/common/siteList')">
				<text class="left">部分加注站</text>
				<view class="arrow_nav"></view>
			</view>
			<view class="site_list">
				<view class="_btn" v-for="(it, ix) in siteList" :key="it.siteId">
					{{it.siteName}}
					<image class="icon-close2" src="/static/images/icon-close2.png" mode="aspectFill" @tap="removeItem(ix)"></image>
				</view>
			</view>
			<view class="list-view-blank"></view>
		</view>
		
		<!-- 按钮 -->
		<view class="btn_pub_blank"></view>
		<view class="btn_pub bottom" @tap="submit">保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				add: true,  //是否为添加页面，默认为true
				info: {},  //信息
				userType: 1,  //客户类型，1-充值，2-免单
				rechargeMoney: '',  //首次充值金额
				lstSiteId: '',  //加注站Id
				siteList: [],  //加注站集合
				isSelectAll: true, //是否选择全部
			}
		},
		watch:{
			siteList(newVal){
				if(newVal.length) {
					this.isSelectAll = false;
				} else {
					this.isSelectAll = true;
				} 
			}
		},
		onLoad(e) {
			this.info = JSON.parse(this.$store.state.tmpData);
			this.siteList = this.info.lstMaps;
			this.$store.commit('setTmpData', '');
			this.add = e.ptype === 'a' ? true : false;
			uni.$on('common_chooseSite', this.chooseSite);
		},
		onReady() {
			if(!this.add) {
				uni.setNavigationBarTitle({ title: '编辑客户类型' });
				this.userType = this.info.userType;
			}
		},
		onUnload() {
			uni.$off('common_chooseSite', this.chooseSite);
		},
		methods: {
			selectAll() {
				this.isSelectAll = true;
				this.siteList = [];
			},
			removeItem(index) {
				this.siteList.splice(index,1);
			},
			//监听选择加注站
			chooseSite(e) {
				let obj = {};
				this.siteList = this.siteList.concat(e);
				this.siteList.forEach(item => obj[item.siteId] = item);
				this.siteList = Object.values(obj);
				obj = null;
			},
			//提交
			submit() {
				let arr = [];
				this.siteList.forEach(item => {
					arr.push(item.siteId);
				});
				this.lstSiteId = this.$arrToStr(arr);
				//request
				this.add ? this.doAdd():this.doEdit();
			},
			//添加
			doAdd() {
				if(!this.rechargeMoney && this.userType === 1) {
					this.$showToast('请输入充值金额！');
					return;
				}
				this.$http({
					url: this.$api.clientUrl + 'addfilloperator',
					data: {
						userId: this.info.userId,
						userType: this.userType,
						rechargeMoney: parseFloat(this.rechargeMoney),
						lstSiteId: this.lstSiteId.toString()
					}
				}).then(res => {
					this.$successToast('添加成功！');
					setTimeout(() => {
						uni.$emit('client_addMember', {});
					}, this.$tmp.TIME_SUC);
					this.$sucBack(2);
				});
			},
			//编辑修改
			doEdit() {
				this.$http({
					url: this.$api.clientUrl + 'editusertype',
					data: {
						userId: this.info.userId,
						userType: this.userType,
						lstSiteId: this.lstSiteId
					}
				}).then(res => {
					this.$successToast('保存成功！');
					uni.$emit('client_changeType', {
						userType: this.userType,
						userId: this.info.userId
					});
					this.$sucBack();
				});
			}
		}
	}
</script>

<style lang="scss">
	/* 用户信息 */
	.infoview {
		width: 100%;
		padding: 40rpx;
		background-color: $color-white;
		border-bottom: 1rpx solid $color-list;
		.line.t1 {
			margin-top: 50rpx;
		}
		.line {
			width: 100%;
			padding-left: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.img {
				width: 60rpx;
				height: 60rpx;
				margin-left: 11rpx;
				border-radius: $border-radius-circle;
			}
			.text {
				flex: 1;
				text-align: end;
			}
		}
	}
	
	/* 类型选择 */
	.typeview.bl {
		border-bottom: 1rpx solid $color-list;
	}
	.typeview {
		width: 750rpx;
		padding: 50rpx 0;
		background-color: $color-white;
		.tip {
			width: 100%;
			padding-left: 46rpx;
		}
		.type {
			width: 100%;
			margin-top: 47rpx;
			padding-left: 50rpx;
			display: flex;
			flex-direction: row;
			.btn.sl {
				color: $color-white;
				background-color: $color-primary;
			}
			.btn {
				width: 304rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				margin-left: 20rpx;
				border-radius:35px;
				background-color: $color-bg;
			}
		}
		.input {
			width: 750rpx;
			margin-top: 40rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.cont {
				width: 350rpx;
				height: 84rpx;
				border-bottom: 1rpx solid $color-list;
				display: flex;
				flex-direction: row;
				align-items: center;
				.icon {
					font-size: 44rpx;
					font-weight: bold;
				}
				.int {
					flex: 1;
					margin: 0 20rpx;
					font-size: 32rpx;
				}
			}
			.dw {
				font-size: 32rpx;
			}
		}
	}
	
	/* 可用加注站 */
	.tblank {
		width: 750rpx;
		height: 51rpx;
		background-color: $color-white;
	}
	.select-item {
		background-color: #FFFFFF;
		padding: 10rpx 40rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		
		&.active {
			color: #407CFF;
		}
	}
	.title {
		width: 750rpx;
		padding: 20rpx 40rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
		.arrow_nav {
			height: 26rpx;
			width: 13rpx;
		}
		.left {
			flex: 1;
		}
	}
	.site_list {
		margin: 0;
		padding: 20rpx 40rpx;
	}
	.list-view-blank {
		width: 100%;
		height: 30rpx;
		margin-bottom: 120rpx;
		background-color: $color-white;
	}
	
</style>
